<template>
  <div>
    <tableComponents
      :isHavePagination="false"
      :isShow="false"
      :isHaveExport="false"
      @toAdd="checkBd(true)"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list"
          v-loading="loading"
          stripe
          header-row-class-name="head_color"
          row-key="id"
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column
            type="selection"
            class="tc"
            width="35"
          ></el-table-column>

          <el-table-column label="字段信息" min-width="240">
            <template slot-scope="scope">
              <div>
                <span>字段名称：</span>
                {{ scope.row.title }}
              </div>
              <div>
                <span>英文标识：</span>
                {{ scope.row.iden }}
              </div>
              <div>
                <span>参数：</span>
                {{ scope.row.parameter || "---" }}
              </div>
              <div>
                <span>默认文字：</span>
                {{ scope.row.default || "---" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="表单类型" min-width="80">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.types == 1">文本框</span>
                <span v-else-if="scope.row.types == 2">单选</span>
                <span v-else-if="scope.row.types == 3">多选</span>
                <span v-else-if="scope.row.types == 4">下拉</span>
                <span v-else-if="scope.row.types == 5">时间</span>
                <span v-else-if="scope.row.types == 6">图片</span>
                <span v-else-if="scope.row.types == 7">文本域</span>
                <span v-else-if="scope.row.types == 8">地址</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="备注" min-width="220" align="center">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.remark }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="是否开启" min-width="80">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_open"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="开启"
                inactive-text="关闭"
                active-value="1"
                @change="getOpen($event, scope.row)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="是否必填" min-width="80">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.is_verification"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="是"
                inactive-text="不是"
                active-value="1"
                @change="getVerification($event, scope.row)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="200" align="center">
            <template slot-scope="scope">{{
              scope.row.created_time | getTimeFormat
            }}</template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="120">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="warning"
                @click="checkBd(false, scope.row)"
                >编辑</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteNew(scope.$index, scope.row.id)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      title="编辑字段"
      :close-on-click-modal="false"
      width="800px"
      @close="closeDio"
      :visible.sync="dialogFormVisible"
      class="tl size_13"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item
          label="字段名称"
          prop="title">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.title"
              autocomplete="off"
              placeholder="请输入字段名称"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="英文标识"
          prop="iden">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.iden"
              autocomplete="off"
              placeholder="请输入英文标识"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="表单类型"
          prop="types">
          <el-col :span="12">
            <el-select
              v-model="ruleForm.types"
              placeholder="请选择表单类型"
              size="small" style="width: 100%;">
              <el-option label="文本框" value="1"></el-option>
              <el-option label="单选" value="2"></el-option>
              <el-option label="多选" value="3"></el-option>
              <el-option label="下拉" value="4"></el-option>
              <el-option label="时间" value="5"></el-option>
              <el-option label="文本域" value="7"></el-option>
              <el-option label="地址" value="8"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item
          label="参数"
          prop="parameter"
          v-if="
            ruleForm.types == '2' ||
            ruleForm.types == '3' ||
            ruleForm.types == '4'
          ">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.parameter"
              type="textarea"
              rows="3"
            ></el-input>
            <div class="tl">请使用@作为分隔符</div>
          </el-col>
        </el-form-item>
        <el-form-item
          label="精确到"
          prop="parameter"
          v-if="ruleForm.types == '8'">
          <el-col :span="12">
            <el-radio v-model="ruleForm.parameter" label="1">省</el-radio>
            <el-radio v-model="ruleForm.parameter" label="2">省市</el-radio>
            <el-radio v-model="ruleForm.parameter" label="3">省市区</el-radio>
            <el-radio v-model="ruleForm.parameter" label="4">省市区县</el-radio>
          </el-col>
        </el-form-item>
        <el-form-item
          label="默认文字"
          prop="default">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.default"
              autocomplete="off"
              placeholder="请输入默认文字"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否开启">
          <el-col :span="12">
            <el-switch
              class="zdySwith"
              :width="82"
              v-model="ruleForm.is_open"
              active-color="#1aad19"
              inactive-color="#ffffff"
              active-text="已开启"
              inactive-text="已关闭"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-col>
        </el-form-item>

        <el-form-item label="是否必填">
          <el-col :span="12">
            <el-switch
              class="zdySwith"
              :width="82"
              v-model="ruleForm.is_verification"
              active-color="#1aad19"
              inactive-color="#ffffff"
              active-text="已开启"
              inactive-text="已关闭"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-col>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.remark"
              autocomplete="off"
              placeholder="请输入备注"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="addMenu('ruleForm')"
            size="mini"
            >立即提交</el-button
          >
          <el-button
            :loading="$store.state.isLoading"
            @click="dialogFormVisible = false"
            size="mini"
            >取 消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import bdFieldForm from "../../../components/plug/form/bd-field-list/bd-field-form";
export default {
  data() {
    var checkIden = (rule, value, callback) => {
      setTimeout(() => {
        if (!/^[a-zA-Z]([_a-zA-Z0-9]{0,})$/.test(value)) {
          callback(new Error("请输入以英文为开头的标识，可拼接下划线和数字"));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      list: [],
      loading: true,
      showBdFrom: false,
      row: "",
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        iden: "",
        remark: "",
        default: "",
        is_open: 1,
        is_verification: 1,
      },
      rules: {
        title: [{ required: true, message: "请输入字段名称", trigger: "blur" }],
        iden: [
          { required: true, message: "请输入英文标识", trigger: "blur" },
          { validator: checkIden, trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
    };
  },
  components: {
    HeadTitle,
    bdFieldForm,
  },
  methods: {
    details(index, id) {
      this.$api.getClassify.getClassFieldDetails({ id }).then((res) => {});
    },
    deleteNew(index, id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getClassify.delClassField(data).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.list.splice(index, 1);
            } else {
              this.$swal("删除失败！", res.data.result, "success");
            }
          });
        }
      });
    },
    addMenu() {
      var params = {};
      params = this.ruleForm;
      if (this.row == "添加" || this.row == "") {
        params.id = this.$route.query.id;
        this.$api.getClassify.addClassField(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
            this.dialogFormVisible = false;
            this.getClassFieldList();
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
            this.dialogFormVisible = false;
          }
        });
      } else {
        this.$api.getClassify.editClassField(params).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
            this.dialogFormVisible = false;
            this.getClassFieldList();
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
            this.dialogFormVisible = false;
          }
        });
      }
    },
    closeDio() {
      this.dialogFormVisible = false;
      this.ruleForm = {
        title: "",
        iden: "",
        remark: "",
        default: "",
        is_open: 1,
        is_verification: 1,
      };
    },
    getClassFieldList() {
      var id = this.$route.query.id || "";
      this.$api.getClassify.getClassField({ id }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
          //   console.log(this.list)
        }
        this.loading = false;
      });
    },
    checkBd(bool, row) {
      if (bool) {
        this.row = "添加";
      } else {
        this.row = "编辑";
        this.ruleForm = row;
      }
      this.dialogFormVisible = true;
    },
    getOpen(val, row) {
      var params = {};
      params = row;
      params.is_open = val;
      this.updata(params);
    },
    getVerification(val, row) {
      var params = {};
      params = row;
      params.is_verification = val;
      this.updata(params);
    },
    updata(params) {
      this.$api.getClassify.editClassField(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
          this.dialogFormVisible = false;
          this.getClassFieldList();
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          this.dialogFormVisible = false;
        }
      });
    },
  },

  created() {
    this.getClassFieldList();
  },
  computed: {},
};
</script>

<style lang="less" scoped>
thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
</style>
